<style scoped>
.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
</style>
<template>
  <div class="layout">
    <Layout :style="{ minHeight: '100vh' }">
        <!-- 侧边栏 -->
      <Sider :collapsed-width="78" v-model="isCollapsed">
        <Menu
          active-name="0"
          accordion
          theme="dark"
          width="auto"
          :class="menuitemClasses">
            <MenuItem name="0-0" >
                <span @click="home()">首页</span>
            </MenuItem>
            <Submenu :name='it.permId' :key="it.permId" v-for="it in menusList">
            <template slot="title">
              <span>{{it.permName}}</span>
            </template>
              <MenuItem :name='it.permId-item.permId' :key="item.permId" v-for="item in it.children">
                <span @click="h(item.url,it.permName,item.permName)" >{{item.permName}}</span>
              </MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout>
        <!-- 头部 -->
        <Header
          :style="{
            background: '#fff',
            boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)',
          }">
            <div style="display: inline-block;float:right">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        欢迎<span style="color: #409EFF">{{userName}}，{{roleName}}</span>
                        
                        个人中心<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="dialogVisible = true">修改密码</el-dropdown-item>
                        <el-dropdown-item @click.native="out()">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </Header>
        <!-- 修改密码框 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="40%">
          <el-form :model="form" :rules="rules" >
            <el-form-item label="旧密码" prop="oldPwd" :label-width="formLabelWidth" placeholder="请输入旧密码">
                <el-input :placeholder="form.oldPwd" v-model="form.oldPwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd" :label-width="formLabelWidth" placeholder="请输入新密码">
                <el-input :placeholder="form.newPwd" v-model="form.newPwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="newPwdRe" :label-width="formLabelWidth" placeholder="请再次确认新密码">
                <el-input :placeholder="form.newPwdRe" v-model="form.newPwdRe" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button v-if="roleId==1" type="primary" @click="updatePwd()">确 定</el-button>
          </span>
        </el-dialog>

        <Content :style="{ padding: '0 16px 16px' }">
            <!-- 面包屑 -->
          <Breadcrumb :style="{ margin: '16px 0' }">
            <BreadcrumbItem>首页</BreadcrumbItem>
            <!-- 循环 -->
            <BreadcrumbItem :key="br.index" v-for="br in Breadcrumb">{{br}}</BreadcrumbItem>
          </Breadcrumb>
          <!-- 主体 -->
          <Card>
            <div style="height: 600px">
                <component :is='sss'></component>
            </div>
          </Card>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>


<script>
import axios from 'axios';
// import user from "../components/admin/UserList";
import H from "../components/Welcome";
import commodityTable from "../components/commodity/commodityTable"
import commodityStyle from "../components/commodity/commodityStyle"
import unit from "../components/commodity/unit"
import purchaseOrder from "../components/purchase/purchaseOrder"
import purchaseHome from "../components/purchase/purchaseHome"
import purchaseReturn from "../components/purchase/purchaseReturn"
import userManage from "../components/systemManage/userManage"
import roleManage from "../components/systemManage/roleManage"

import SalesOrder from '../components/sales/SalesOrder' 
import salesOrdContent from '../components/sales/salesOrdContent'
import SalesOrderReturn from '../components/sales/SalesOrderReturn'
import InputWarehouse from '../components/warehouse/InputWarehouse'
import OutWarehouse from '../components/warehouse/OutWarehouse'
import SalesStatistics from '../components/statistics/SalesStatistics'
import Customerreconciliation from '../components/statistics/Customerreconciliation'
import AccountStatistics from '../components/statistics/AccountStatistics'
import StockStatus from '../components/statistics/StockStatus'
import InventoryAlerts from '../components/statistics/InventoryAlerts'
import supplierreconciliation from '../components/statistics/supplierreconciliation'
import Purchaselist from '../components/purchase/Purchaselist'
import salemanifest from '../components/sales/salemanifest' 

import supplier from "../components/supplier";
import customer from "../components/customer";
import warehouse from "../components/warehouse";
import fundingproject from "../components/fundingproject";
import account from "../components/account";
import revenue_expenditure from "../components/Revenue_expenditure";



export default {
  data() {
    var validatePass = (rule, value, callback) => {
        if (!value) {
            callback(new Error('请输入新密码'));
        } else if (value.toString().length < 6 || value.toString().length > 18) {
            callback(new Error('密码长度为6 - 18个字符'))
        } else {
            callback();
        }
    };
    var validatePass2 = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (!(value === this.form.newPwd)) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    return {
        roleName:'',
        userName:'',
        roleId:'',
        menusList:[],
        Breadcrumb:[],
        form: {
          oldPwd:'',
          newPwd:'',
          newPwdRe:'',
        },
        rules:{
          oldPwd:[
              {required:true, validator:validatePass, trigger:"blur"}
          ],
          newPwd:[
              {required:true, validator:validatePass, trigger:"blur"}
          ],
          newPwdRe:[
              {required:true, validator:validatePass2, trigger:"blur"}
          ],
        },
        isCollapsed: false,
        dialogVisible: false,
        formLabelWidth: '120px',
        sss: H,
    };
  },
  created:function() {
      this.menus()
  },
  computed: {
    menuitemClasses: function () {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
  },
  // 组件注入
    components:{
        commodityTable,
        commodityStyle,
        unit,
        purchaseOrder,
        purchaseHome,
        purchaseReturn,
        userManage,
        roleManage,
        SalesOrder ,
        salesOrdContent,
        InputWarehouse,
        OutWarehouse,
        SalesOrderReturn,
        SalesStatistics,
        Customerreconciliation,
        AccountStatistics,
        StockStatus,
        InventoryAlerts,
        supplierreconciliation,
        Purchaselist,
        purchaseOrder,
        salemanifest,
        supplier,
        customer,
        warehouse,
        fundingproject,
        account,
        revenue_expenditure,
    },
  methods: {
    h(addresUrl,tiName,tiemName) {

      this.sss = addresUrl;
      this.Breadcrumb = [tiName,tiemName]
    },
    async menus() {
        this.userName = sessionStorage.getItem("user");
        this.roleId = sessionStorage.getItem("roleId");
        const {data:res} = await axios.get("http://localhost:8082/perm/menus?username="+this.userName+"&roleId="+this.roleId);
        if(res.flag!=200){
            this.$message.error("系统异常，请重新登陆！！！");   
        }
        this.$message.success("欢迎您，登陆成功");
        this.menusList = res.menus;
        this.roleName = res.roleName;
        
    },
    home() {
        this.sss = H;
        this.Breadcrumb = [];
    },
    // 安全退出
    out(){
        window.sessionStorage.clear(); // 安全退出，清除session
        axios.post("http://localhost:8082/logout"); // shiro用户退出
        this.$router.push('/login'); //跳转到登陆页面---跳转页面
    },
    // 修改密码
    async updatePwd(){
      this.dialogVisible = false;
      const {data:respPwd} = await axios.get("http://localhost:8082/user/updatePwd?username="+this.userName+"&oldPwd="+this.form.oldPwd+"&newPwd="+this.form.newPwd);
      if(respPwd=="ok"){
        this.$message.success("修改成功！");
      }else{
        this.$message.error(respPwd);
      }
    },
  },
};
</script>